<template>
    <div>
        <ul style="list-style:none;">
            <li v-for="product in sproducts">
                <ProductDetail :sproduct="product"></ProductDetail>
            </li>
        </ul>
    </div>
</template>
<script>
 import ProductDetail from './ProductDetail.vue'   
 export default {
            name: "#ProductList",
            props: ['sproducts'],
            components: { ProductDetail },
            created() {
                //value等于传入的this.allcheck
                this.$bus.$on('e_setcheck', (value) => {
                    this.sproducts.map(item => {
                        item.state = value
                    })
                })
            },
            watch: {
                'sproducts': {
                    handler(newVal) {
                        //获取选择的商品
                        let checkproducts = newVal.filter((item) => {
                            return item.state == true
                        })
                        //计算总价
                        let total = 0
                        checkproducts.map((item) => {
                            total += item.price * item.count
                        })
                        //把总价传入count组件
                        this.$bus.$emit('e_count', total)
                    },
                    deep: true
                }
            }
        }   
</script>